<template>
  <div class="app-page-scroll">
    <div style="height: 550px; margin-bottom: 24px">
      <lg-table class="fixed-header" :schema="schema" v-bind="tableProps">
        <!-- 工具栏 -->
        <template #toolbar-left>
          <lg-button-list :limit="$ToolBtnLimit">
            <btn-tool-remove @click="remove()" />
            <btn-tool-export @click="exports" />
            <btn-tool-import @click="imports" />
            <template #trigger><btn-tool-more /></template>
          </lg-button-list>
        </template>
        <!-- 操作栏 -->
        <template #actionbar="{ row }">
          <lg-button-list :limit="$RowBtnLimit">
            <btn-row-remove @click="remove(row.id)" />
          </lg-button-list>
        </template>
      </lg-table>
    </div>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考 t-table</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>其他事件参考 t-table</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
      <div>其他插槽根据配置（schema）确定</div>
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { Arrayable, IConfigSchema, LgButtonList, LgTable, useTable } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import mock from '@/utils/mockUtils';

const { tableProps, remove, exports, imports } = useTable<any>({
  api: {
    query(params: any) {
      return data;
    },
    remove(ids: Arrayable<string | number>): Promise<any> {
      return Promise.resolve();
    },
  },
  props: {
    pagination: false,
  },
});
//
// const { tableProps, remove, exports, imports } = useTreeTable({
//   api: {
//     query(params: any) {
//       return data;
//     },
//     remove(ids: Arrayable<string | number>): Promise<any> {
//       return Promise.resolve();
//     },
//   },
//   loadChildren(row) {
//     return new Promise((resolve) => {
//       setTimeout(() => {
//         resolve([{ id: row.id + Math.random(), children: true }]);
//       }, 1000);
//     });
//   },
// });

const schema: IConfigSchema<any>[] = [
  {
    field: 'a',
    label: '字段a',
    dataType: 'string',
  },
  {
    field: 'b',
    label: '字段b',
    dataType: 'number',
  },
  {
    field: 'c',
    label: '字段c',
    dataType: 'boolean',
  },
  {
    field: 'd',
    label: '字段d',
    dataType: 'datetime',
  },
];

const data = mock.mockData({
  total: 20,
  data: {
    id: (i) => i + Math.random(),
    a: (i) => mock.mobile(),
    b: (i) => mock.number(0, 100),
    c: (i) => mock.boolean(),
    d: (i) => mock.birthday(),
    children: (i) => i % 2 === 0,
  },
});

const propsData = [
  { name: 'schema', desc: '结构配置（必填）', type: 'IConfigSchema[] | ITableSchema[]', def: '' },
  { name: 'data', desc: '表格数据（必填）', type: 'Function | string | any[]', def: '' },
  { name: 'fields', desc: '查询字段配置', type: 'string|string[]', def: '' },
  { name: 'orderBys', desc: '默认排序字段（优先级低于列配置）', type: 'string | string[]', def: '' },
  { name: 'searchbar', desc: '搜索栏配置', type: 'LgSearchBarProps | boolean', def: 'false' },
  { name: 'toolbar', desc: '是否使用工具栏', type: 'boolean', def: 'true' },
  { name: 'pagination', desc: '分页配置，为false不使用分页', type: 'PaginationProps | boolean', def: 'false' },
  { name: 'column', desc: '列默认配置', type: 'BaseTableCol', def: '' },
  { name: 'selection', desc: '多选框列配置', type: 'BaseTableCol | boolean', def: 'false' },
  { name: 'index', desc: '序号列配置', type: 'BaseTableCol | boolean', def: 'false' },
  { name: 'actionbar', desc: '操作列配置', type: 'BaseTableCol | boolean', def: 'false' },
  { name: 'immediate', desc: '是否立即加载数据', type: 'boolean', def: 'true' },
  { name: 'tableProps', desc: 't-table 配置透传', type: 'EnhancedTableProps', def: '' },
  { name: 'rowKey', desc: '行唯一值的字段', type: 'string', def: 'id' },
  { name: 'paramsHandle', desc: '参数处理，可在请求前对请求参数进行调整', type: 'function', def: '' },
  { name: 'dataHandle', desc: '数据处理，可对请求后的响应数据进行处理', type: 'function', def: '' },
];

const emitData = [];

const apiData = [
  { name: 'searchRef', desc: '搜索栏引用', type: 'ref', sample: '' },
  { name: 'tableRef', desc: 't-table引用', type: 'ref', sample: '' },
  { name: 'getParams', desc: '获取查询参数', type: 'function', sample: '' },
  { name: 'getSoarQuery', desc: '获取SoarQuery查询参数', type: 'function', sample: '' },
  { name: 'reload', desc: '重新加载数据', type: 'function', sample: '' },
  { name: 'reset', desc: '重置查询参数', type: 'function', sample: '' },
];

const slotData = [
  { name: 'searchbar', desc: '搜索栏位置', scope: '' },
  { name: 'toolbar', desc: '工具栏位置', scope: '' },
  { name: 'toolbar-left', desc: '左侧工具栏', scope: '' },
  { name: 'toolbar-right', desc: '右侧工具栏', scope: '' },
  { name: 'alert', desc: '已选数据栏', scope: '' },
];
</script>
